import MapKit
import SwiftUI

struct locationView: View {
    @Environment(LocationViewModel.self) private var vm
    let maxWidthForIpad: CGFloat = 700
    var body: some View {
        @Bindable var mapLocation = vm
        ZStack {
            Map(position: $mapLocation.mapRegin) {
                ForEach(vm.location) { location in
                    Annotation(location.name, coordinate: location.coordinates, content: {
                        locationIconView()
                            .scaleEffect(vm.mapLocation == location ? 1 : 0.7)
                            .shadow(radius: 10)
                            .onTapGesture {
                                vm.updateNextLocation(location: location)
                            }
                    })
                }
            }
            .ignoresSafeArea()
            VStack(spacing: 0) {
                header.padding().frame(maxWidth: maxWidthForIpad)
                Spacer()
                footer
            }
        }
        // onDismiss 当模态视图被关闭时调用
        .sheet(item: $mapLocation.showLocationDetail, onDismiss: nil, content: { location in
            locationDetailView(location: location)
        })
    }
}

#Preview {
    locationView().environment(LocationViewModel())
}

extension locationView {
    private var header: some View {
        VStack {
            Button {
                vm.updateShowLocationList()
            } label: {
                Text(vm.mapLocation.name+","+vm.mapLocation.cityName)
                    // h2
                    .font(.title2)
                    .fontWeight(.black)
                    .foregroundColor(.primary)
                    .frame(height: 55)
                    .frame(maxWidth: .infinity)
                    .animation(.none, value: vm.mapLocation)
                    // 在当前视图上添加一个新视图
                    .overlay(alignment: .leading, content: {
                        Image(systemName: "arrow.down").font(.headline).foregroundColor(.primary)
                            .padding()
                            // Angle角度对象  度degrees
                            .rotationEffect(Angle(degrees: vm.showLocationList ? 180 : 0))
                    })
            }
            if vm.showLocationList {
                locationListView()
            }
        }
        .background(.thinMaterial)
        .cornerRadius(10)
        .shadow(color: .black.opacity(0.3), radius: 20, x: 0, y: 15)
    }

    private var footer: some View {
        ZStack {
            ForEach(vm.location) { location in
                if vm.mapLocation == location {
                    locationPreviewView(location: location)
                        .shadow(color: .black.opacity(0.3), radius: 20)
                        .padding()
                        .frame(maxWidth: maxWidthForIpad)
                        .frame(maxWidth: .infinity)
                        // transition 动画
                        // asymmetric 不对称的过渡效果
                        .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
                }
            }
        }
    }
}
